博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
分页样式 和 后台
阅读量:6247 次
发布时间:2019-06-22

本文共 3156 字,大约阅读时间需要 10 分钟。

hot3.png

1、先看效果图

141559_HPgk_3551274.png

(前7页)

141813_zxvy_3551274.png

(中间)

141627_VRN4_3551274.png

(后7页)

 

2、代码部分

其中 传参 和  跳转部分也就不说了----直接贴 CSS样式  和  后端代码

.wrap .page-box {  width: 100%;  position: relative;  height: 32px;  margin: 30px 0 40px 0;}.wrap .page-box .page {  position: absolute;  transform: translate(-50%, -50%);  left: 50%;  top: 50%;}.wrap .page-box .page a {  width: 30px;  height: 30px;  display: block;  line-height: 30px;  border: 1px solid #ccc;  box-sizing: border-box;  text-align: center;  float: left;  margin-right: 10px;  font-size: 13px;}.wrap .page-box .page a:last-child {  margin-right: 0;}.wrap .page-box .page a:hover {  background: #6cbef6;  border-color: #6cbef6;  color: #fff;  transition: all .5s;}.wrap .page-box .page a.on {  background: #6cbef6;  border-color: #6cbef6;  color: #fff;}.wrap .page-box .page a.no {  opacity: 0;  cursor: default;}

DIV整体结构图如下,但这里没有分页没有写在HTML中,写在了Java代码中,直接放到了前台

public class Pages {	public static final String ATTR_PAGE = "_page";	public static final String ATTR_TOTAL_PAGE ="_total_page";	public static final String ATTR_TOTAL_RECODE = "_total_recode";	private int page; // 当前页	private int totalPage; // 总页数	private int totalRecode; //总记录数	private String url; // 当前url,再参数	private String params;	private boolean useJSRequest;	private String pageStyle;	private static final int t = 7;  // 分页样式控制              //中间省却getter setter 和 各种调用代码    	/**	 * 新的分页Lee	 * page; 		// 当前页	 * totalPage; 	// 总页数	 * totalRecode; //总记录数	 * url; 		// 当前url,再参数	 */	private void writeNewPage(StringBuilder sb){		//总共页数		sb.append("

总条数:").append(totalRecode).append("条

"); //上一页 sb.append("
"); if (page <= 1) {//
"); }else{ sb.append("
"); } // 小于前7页时展现形式 if( page < t ){ //前7页的样式 for(int i = 1; i <= t ; i ++ ){ if( i > totalPage ) break; if(page == i){ sb.append("
"+page+""); }else{ sb.append("
"+i+""); } } //总页数大于7页,显示最后两页 if(totalPage>t+1){ sb.append("
... "); if(totalPage-2>=t){ int lastpage = (totalPage-1); sb.append("
"+lastpage+""); sb.append("
"+totalPage+""); }else{ sb.append("
"+totalPage+""); } } //大于7页小于总页数时的样式 }else if( page >= t ){ //显示前两页 :1 2 ... 中间页 ... n n+1 sb.append("
1"); sb.append("
2"); sb.append("
..."); if((totalPage-page)>=t){ for(int i = 1; i <= t; i ++ ){ if(i == 4){ sb.append("
"+page+""); }else{ sb.append("
"+(page-(4-i))+""); } } sb.append("
... "); int lastpage = (totalPage-1); sb.append("
"+lastpage+""); sb.append("
"+totalPage+""); //到后7页时的样式: 1 2 ... 后7页 }else{ int first = 0; if(totalPage-2>t){ first = totalPage -7; }else{ first = 3; } for(int i = 0; i <= t; i ++ ){ int x = first + i ; if( x > totalPage ) break; if( page == x ){ sb.append("
"+x+""); }else{ sb.append("
"+x+""); } } } } // 结尾 if(page
> "); }else{ sb.append("
"); } sb.append("
"); }}

 

转载于:https://my.oschina.net/u/3551274/blog/1491492

你可能感兴趣的文章
LeetCode: Linked List Cycle [141]
查看>>
移动开发框架剖析(一) Hammer专业的手势控制
查看>>
“权限”用英语该用哪个?
查看>>
Android 中字体的处理
查看>>
VS2010 lib和dll导出路径设置
查看>>
html传值及接收传值
查看>>
【设计模式】—— 解释器模式Interpret
查看>>
Eclipse For Android 代码自动提示功能
查看>>
nc命令使用详解
查看>>
无法加载 DLL“rasapi32.dll”: 动态链接库(DLL)初始化例程失败。
查看>>
windows 如何查看端口占用情况?
查看>>
SSIS如何引用外部DLL
查看>>
IOS开发基础知识--碎片1
查看>>
递归函数的深入理解,很多人的理解误区
查看>>
android Eclipse执行项目提示错误: unable to execute dex: GC orerhead limit exceeded
查看>>
“WPF老矣,尚能饭否”—且说说WPF今生未来(上):担心
查看>>
Tomcat 集群
查看>>
opencv4-highgui之视频的输入和输出以及滚动条
查看>>
使用一个HttpModule拦截Http请求,来检测页面刷新(F5或正常的请求)
查看>>
HttpContext.Current.Cache使用文件依赖问题
查看>>